<template>
  <div class="container">
    <div class="search-container">
      <div class="search-option-row">
        <label v-if="hasRoles('INVOICE_INFO_BILL')" class="search-option-label">人员</label>
        <div v-if="hasRoles('INVOICE_INFO_BILL')" class="search-option-col">
          <el-select
              v-model="listQuery.user_id"
              filterable
              clearable
              placeholder="请选择">
            <el-option
              v-for="item in allUserOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <label class="search-option-label">款项类型</label>
        <div class="search-option-col">
          <el-select
              v-model="listQuery.cash_type"
              clearable
              placeholder="请选择">
            <el-option key="0" label="绩效" value="0"></el-option>
            <el-option key="1" label="抵扣" value="1"></el-option>
          </el-select>
        </div>
        <label class="search-option-label">季度结算</label>
        <div class="search-option-col">
          <el-select
              v-model="listQuery.is_handle"
              clearable
              placeholder="请选择">
            <el-option key="0" label="待结算" value="0"></el-option>
            <el-option key="1" label="已结算" value="1"></el-option>
          </el-select>
        </div>
        <label class="search-option-label">候选人</label>
        <div class="search-option-col">
        <el-input v-model="listQuery.candidate_name" class="select-item" placeholder="请输入" style="width: 180px;" ></el-input> 
        </div>
      </div>
      <div class="search-button-row" >
        <label class="search-button-label"></label>
        <div class="search-button-col">
        <el-button size="mini" type="primary" icon="el-icon-search" @click="handleSearch" round>搜索</el-button>
        <el-button size="mini" type="primary" icon="el-icon-refresh" @click="clearOptions" round>清空</el-button>
        </div>
      </div>
    </div>
    <div class="table-container">
      <el-table show-summary 
        :summary-method="getSummaries"
        ref="multipleTable"
        :key='tableKey' :data="list" v-loading="listLoading" 
        element-loading-text="给我一点时间" border fit highlight-current-row
        style="width: 100%">
        <el-table-column align="center" label="人员" min-width="90px" prop='username'>
          <template slot-scope="scope">
            <span>{{scope.row.username}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="角色" min-width="100px"  prop='project_role'>
          <template slot-scope="scope">
            <span v-if="scope.row.project_role">{{scope.row.project_role | projectRoleFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="项目" min-width="120px" prop='project_name'>
          <template slot-scope="scope">
            <span v-if="scope.row.project_name">{{scope.row.project_name }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="候选人" min-width="90px" prop='candidate_name'>
          <template slot-scope="scope">
            <span v-if="scope.row.candidate_name">{{scope.row.candidate_name }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="款项类型" min-width="80px" prop='cash_type'>
          <template slot-scope="scope">
            <span v-if="scope.row.cash_type">{{ scope.row.cash_type | cashTypeFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="金额(元)" min-width="100px" prop='cash_amount'>
          <template slot-scope="scope">
            <span v-if="scope.row.cash_amount">{{scope.row.cash_amount }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="结算状态" min-width="100px"  prop='is_handle'>
          <template slot-scope="scope">
            <div v-if="scope.row.is_handle">
              <el-tag>{{scope.row.is_handle | isHandleFilter }}</el-tag>
            </div>
            <div v-if="scope.row.handle_date">
              <el-tag>{{scope.row.handle_date | timeFilter('{y}-{m}-{d}') }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建日期" width="120px" prop='create_date' >
          <template slot-scope="scope">
            <span v-if="scope.row.create_date">{{scope.row.create_date | timeFilter('{y}-{m}-{d}')}}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="hasRoles('INVOICE_INFO_BILL')" align="center" :label="$t('table.actions')" class-name="small-padding fixed-width" min-width="120px">
          <template slot-scope="scope">
            <span v-if="scope.row.is_handle==='0'">
              <el-button type="primary" size="mini" @click="showCalc(scope.row)">结算</el-button>
            </span>
            <span v-else></span>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>

    <el-dialog title="季度结算" :visible.sync="dialogFormVisible">
      <el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>
        <el-form-item label="结算金额" width="120px">
          <span>
            {{ temp.cash_amount }} 元
          </span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="calc()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style scoped>
  .form-table-border{
    margin: 1px 1px 1px 1px;
    border: 1px solid #ddd;
  }
  .search-container{
    display: block;
    border: 1px solid #ebebeb;
    margin: 2px 2px 2px 2px;
  }
  .search-option-row{
    display: block;
    margin: 6px 0px 6px 6px;
  } 
  .search-option-label{
    display: inline-block;
    width: 8%;
    text-align: right;
  }
  .search-option-col{
    display: inline-block;
    width:  15%;
  }
  .search-option-date-col{
    display: inline-block;
    width:  35%;
  }
  .search-button-row{
    display: block;
    margin: 2px 0px 2px 2px;
  }
  .search-button-label{
    display: inline-block;
    width: 8%;
    text-align: right;
  }
  .search-button-col{
    display: inline-block;
    width: 25%;
  }

  .table-header-row {
    display: block;
    border: 1px solid #ebebeb;
    margin: 2px 0px 2px 2px;
  }

  .table-header-button {
    display: inline-block;
    margin: 2px 0px 2px 2px;

  }

  .table-container{
    border: 1px solid #ebebeb;
    margin: 2px 2px 2px 2px;   
  }

  .table-container .small_tag{
    font-size: 12px;
  }

  .select-item {
    display: inline-block;
    vertical-align: middle;
    width: 200px;
  }

  .form-row {
    display: block;
  }

  .form-item {
    width: 48%
  }
  .form-item_part {
    width: 20%
  }
  .form-item-full {
    width: 100%
  }

  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
<script>
import API from '@/utils/backend_api'
import waves from '@/directive/waves'
// import Static_Data from '@/data/index'
// import { getToken } from '@/utils/auth'
export default {
  name: 'bill',
  components: { },
  directives: {
    waves
  },
  data() {
    return {
      current_user_roles: this.$store.getters.roles,
      hasRoles(roles) {
        return this.current_user_roles.some(item => roles.indexOf(item) >= 0)
      },
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        offset: 0,
        limit: 20,
        user_id: '',
        cash_type: '',
        is_handle: '0',
        candidate_name: '',
        sort: '+create_date'
      },
      temp: {
        id: '',
        invoice_id: '',
        cash_type: ''
      },
      allUserOptions: this.$store.getters.usersList.map(item => ({ value: item.id, label: item.username + '(' + item.uid + ')' })),
      dialogFormVisible: false,
      rules: {
      }
    }
  },
  filters: {
    isHandleFilter(val) {
      if (val === '0') {
        return '待结算'
      }
      if (val === '1') {
        return '已结算'
      }
      return ''
    },
    cashTypeFilter(val) {
      if (val === '0') {
        return '绩效'
      }
      if (val === '1') {
        return '抵扣'
      }
      return ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价'
          return
        }
        if (column.property && column.property === 'cash_amount') {
          sums[index] = Number('0')
          data.map(item => {
            if (item.cash_type && item.cash_type === '0') {
              sums[index] = sums[index] + Number(item.cash_amount)
            }
            if (item.cash_type && item.cash_type === '1') {
              sums[index] = sums[index] - Number(item.cash_amount)
            }
          })
          sums[index] += ' 元'
        } else {
          sums[index] = 'N/A'
        }
      })
      return sums
    },
    getList() {
      this.listLoading = true
      API.invoice.all_cash(this.listQuery).then(response => {
        console.log(response)
        this.list = response.data
        if (response.headers && response.headers['x-total-count']) {
          this.total = Number(response.headers['x-total-count'])
        }
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: '操作成功',
        type: 'success'
      })
      row.status = status
    },
    resetTemp() {
      this.temp = {
        id: '',
        invoice_id: '',
        cash_amount: ''
      }
    },
    showCalc(data) {
      console.log(data)
      this.temp.id = data.id
      this.temp.invoice_id = data.invoice_id
      this.temp.cash_amount = data.cash_amount
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    calc() {
      API.invoice.handle_cash(this.temp.invoice_id, this.temp.id).then(response => {
        if (response.data) {
          for (const v of this.list) {
            if (v.id === this.temp.id) {
              const index = this.list.indexOf(v)
              this.list.splice(index, 1, response.data)
              break
            }
          }
          this.resetTemp()
          this.$message({
            type: 'success',
            message: '结算成功!'
          })
          this.dialogFormVisible = false
        }
      })
    },
    handleSearch() {
      this.getList()
    },
    clearOptions() {
      this.listQuery = {
        page: 1,
        offset: 0,
        limit: 20,
        user_id: '',
        cash_type: '',
        is_handle: '0',
        candidate_name: '',
        sort: '+create_date'
      }
    }

  }
}
</script>
